<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item >餐品管理</el-breadcrumb-item>
      <el-breadcrumb-item >类别管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!--餐品管理表格-->
    <el-card class="box-card">
      <el-row :gutter="24">
        <el-col style="text-align: right">
          <el-button size="mini" @click="handleAdd">添加类别</el-button>
        </el-col>
      </el-row>
      <el-table stripe border :data="cates" style="width: 100%">
        <el-table-column prop="name" label="名称" width="180"></el-table-column>
        <el-table-column prop="description" label="描述" width="180">
        </el-table-column>
        <el-table-column prop="addTime" label="添加时间" :formatter="dateFormat">
        </el-table-column>
        <el-table-column prop="isDefault" label="操作" align="right">
          <template slot-scope="scope">
            <el-tooltip :enterable="false" effect="dark" content="编辑" placement="top">
              <el-button type="primary" @click="handleEdit(scope.$index, scope.row)" size="mini" icon="el-icon-edit"/>
            </el-tooltip>
            <el-tooltip :enterable="false" effect="dark" content="删除" placement="top">
              <el-button type="danger" @click="handleDelete(scope.$index, scope.row)"
                         size="mini" icon="el-icon-delete"/>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!--新增类别对话框-->
    <div>
      <el-dialog
          title="新增类别"
          :visible.sync="dialogVisible1"
          width="30%"
          :before-close="handleClose">
        <el-form label-position="right" :rules="rules" label-width="80px" ref="AddCategoryRef" :model="newCategory">
          <el-form-item prop="name" label="名称">
            <el-input v-model="newCategory.name"></el-input>
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="newCategory.description"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onAdd">添加类别</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>

    <!--修改类别对话框-->
    <div>
      <el-dialog
          title="修改类别"
          :visible.sync="dialogVisible2"
          width="30%"
          :before-close="handleClose">
        <el-form label-position="right"
                 label-width="80px"
                 :model="updateCategory"
                 :rules="rules"
                 ref="updateCategoryRef"
        >
          <el-form-item prop="name" label="名称">
            <el-input v-model="updateCategory.name"></el-input>
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="updateCategory.description"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onUpdate">修改类别</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import moment from 'moment'

export default {
  name: "CateManage",
  inject: ['reload'],
  data() {
    return {
      dialogVisible1: false,  //新增弹出框
      dialogVisible2: false,  //修改弹出框
      // 类别列表
      cates: [],
      // 新增类别信息
      newCategory: {
        restaurantId: null,
        name: '',
        description: '',
        addTime: null
      },
      //修改类别信息
      updateCategory: {
        id: null,
        restaurantId: null,
        name: '',
        description: '',
        addTime: null
      },
      rules:{
        name:[ {required: true, message: '名称不可为空', trigger: 'blur'},]
      }
    }
  },
  created() {
    this.$axios({
      method: "get",
      url: "/cate/list",
      params: {
        rid: this.$store.getters.rid
      }
    })
        .then(response => {
          if (response.data.success) {
            this.cates = response.data.cate_list
          }
          console.log(response.data.message)
        })
        .catch(error => console.log(error));
  },
  methods: {
    handleClose(done) {
      done();
    },
    handleAdd: function () {
      this.dialogVisible1 = true;
    },
    //修改
    handleEdit(index, row) {
      this.updateCategory.id = row.id;
      this.updateCategory.name = row.name;
      this.updateCategory.description = row.description;
      this.dialogVisible2 = true;
    },
    //删除
    handleDelete(index, row) {

      this.$confirm('确认删除这个类别?')
          .then(_ => {
            this.$axios({
              method: "get",
              url: "/cate/delete",
              params: {
                id: row.id
              }
            }).then(response => {
              if (response.data.success) {
                this.reload();
              }
              console.log(response.data.message)
            })
                .catch(error => console.log(error))
          })
          .catch(_ => {
          });
    },
    // 提交新的cate
    onAdd() {
      this.$refs.AddCategoryRef.validate((valid) => {
        if (valid) {
          this.$axios({
            method: "post",
            url: "/cate/newcate",
            data: {
              restaurantId: this.$store.getters.rid,
              name: this.newCategory.name,
              description: this.newCategory.description,
              addTime: new Date().getTime()
            }
          }).then(response => {
            if (response.data.success) {
              this.dialogVisible1 = false;
              this.reload();
            }
          })
              .catch(error => console.log(error));
        } else {
          return this.$message.error('名称不能为空！');
        }

      })
    },
    // 提交修改cate
    onUpdate() {
      this.$refs.updateCategoryRef.validate((valid) => {
        if (valid) {
          this.$axios({
            method: "post",
            url: "/cate/updatecate",
            data: {
              id: this.updateCategory.id,
              name: this.updateCategory.name,
              description: this.updateCategory.description,
            }
          })
              .then(response => {
                if (response.data.success) {
                  this.dialogVisible2 = false;
                  this.reload();
                }
                console.log(response.data.message)
              })
              .catch(error => console.log(error));
        } else {
          return this.$message.error('名称不能为空！');
        }

      })

    },
    // 格式化时间
    dateFormat(row, column) {
      var date = row[column.property];
      if (date === undefined) {
        return ''
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss")
    }
  }
}
</script>

<style scoped>

</style>
